<template>
	<view>
		<page-head headTitle="找导游" :returnButton="true" :news="true" :newsTips="true" :sao="true"  @clickLeftReturn="clickLeftReturn" @clickRightNews="clickRightNews" @clickRightSao="clickRightSao"></page-head>
		<view class="flex bg-white p-l-r3 p-t-b3 justify-between fixed fixed-top9">
			<view class="flex flex-1 m-r1 bg-search search-h align-center border-r p-l2">
				<input class="search-width" placeholder-class="input-goods fs-3 search-width" type="text" @input="setKeyword">
		    </view>
			<view class="flex search-h search-button justify-content align-center border-r" @tap="getList">搜索</view>
		</view>
		<view class="delicacy-mt p-l-r3">
			<view class="bg-white flex p-t-b4 p-l-r border-r2 m-b2" v-for="(item,index) in list" @tap="goDetails" :data-id="item.id">
				<image :src="item.avatar" class="delicacy-image mr" mode="widthFix"></image>
				<view class="flex-1 min-width">
					<view class="flex align-start justify-between m-t1 m-b">
						<view class="flex align-center">
							<text class="fs-32">{{item.name}}</text>
							<image class="gender-pic ml-2" src="/static/images/boy.png" v-if="item.gender == 1"></image>
							<image class="gender-pic ml-2" src="/static/images/gender.png" v-if="item.gender == 2"></image>
						</view>
						<text class="iconfont icon-message book-icon" style="font-size: 66rpx;line-height: 1;"></text>
					</view>
					<view class="flex seek-text">
						<text class="flex justify-content align-center border-r-1 m-r1 white-space" :class="{'beautiful': i_index == 0,'on-foot': i_index == 1, 'explore': i_index == 2}"  v-for="(i_item,i_index) in item.tags">{{i_item}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				list:{},
				keyword:'',
				page:1,
				is_last:0,
				onload:0,
				loadingText:'',
				city:'',
			}
		},
		onLoad(e) {
			if(e.city != ''){
				this.city = e.city;
			}
			this.getList();
		},
		onReachBottom() {
			if(this.last != 1 && this.onload !=1){ 
				this.page+=1;
				this.getNext();
			}
		},
		methods: {
			clickLeftReturn(){
				uni.redirectTo({
				    url: '../index/index'
				});
			},
			//设置关键词
			setKeyword(event){
				var v = event.target.value;
				this.keyword = v.replace(/\s*/g,"");
			},
			//下一页
			getNext(){
				if(this.onload == 1 || this.is_last == 1){
					return false;
				}
				this.onload = 1;
				this.loadingText = '加载中...';
				uni.showNavigationBarLoading();
				this.$myRequest({
					method:'POST',
					url:'/api/guide/search',
					data:{
						city:this.city,
						key:this.keyword,
						page:this.page,
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						var result_list = res.data.data.list;
						if(result_list == ''){
							this.last = 1;
							uni.hideNavigationBarLoading();
							this.loadingText = '已加载全部';
						}else{
							this.list = this.list.concat(result_list);
							this.loadingText = '加载更多';
							uni.hideNavigationBarLoading();
						}
					}
					this.onload = 0;
				})
			},
			//导游列表
			getList(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/search',
					data:{
						city:this.city,
						key:this.keyword,
						page:1,
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						this.list = res.data.data.list
					}
				})
			},
			//跳转详情页
			goDetails(e){
				var gid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../guide-details/guide-details?id='+gid,
				});
			},
			// 消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../../user/news-core/news-core'
				});
			},
			// 扫一扫
			clickRightSao(){
				
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.delicacy-mt{margin-top: 280rpx;}
.delicacy-image{width: 170rpx;height: 170rpx;}
.seek-text text{width: 180rpx;height: 45rpx;overflow: hidden;}
.beautiful{border: 2rpx solid #E77C41;background-color: #FFEADE; color: #E77C41;}
.on-foot{border: 2rpx solid #50ACEC;background-color: #DEF2FF; color: #50ACEC;}
.explore{border: 2rpx solid #F1A733;background-color: #FFF2DE; color: #F1A733;}
.gender-pic{width: 23rpx;height: 36rpx;}
</style>
